<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                    
    <title>Finalpaper new posts</title>
    <style type="text/css">
      #homeButton{
        float:left; color:#E4DEF0; cursor:pointer;
      	-webkit-border-radius: 2px;
      	background: #5B3E96;
      	border: 1px solid black;
      	padding: 0px 5px;
      }
      #homeButton:hover{color:orange; background: white;}
      .tabButton{
        float:left; color:#E4DEF0; cursor:pointer;
      	-webkit-border-radius: 2px;
      	background: #5B3E96;
      	border: 1px solid black;
      	padding: 0px 5px;
      }
      .tabButtonSelected{
        float:left; color:#5B3E96;
      	-webkit-border-radius: 2px;
      	background: white;
      	border: 1px solid #5B3E96;
      	padding: 0px 5px;
      }
      #refreshButton{
        float:right; color:red; cursor:pointer;
      	-webkit-border-radius: 2px;
      	background: white;
      	border: 1px solid gray;
      	padding: 0px 5px;
      }
      #refreshButton:hover{color:darkred; background:gray;}
      .nbBadge{
      	display:none;
      	vertical-align:10%;
      	margin:0 3px 2px 0;
      	padding: 0px 3px;
        float:none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
		color: white;
        text-align: center;
        border: 1px #555 solid;
        font: 8px Arial, sans-serif;
      }
      #nbNewComments{background: rgba(0,150,0,0.5);}
      #nbMessages{background: rgba(0,0,255,0.5);}
      #nbWatches{background: rgba(255,0,0,0.5);}

      #container {width:610px; font-size:9pt; padding:5px;}
      div.header {margin: 0 5px 5px 5px; padding-top:5px; background-color:#EEE; font-weight: bold; height:20px; font-size:9pt;}
      .headComments{border-bottom: solid 2px rgba(0,150,0,0.5);}
      .headMessages{border-bottom: solid 2px rgba(0,0,255,0.5);}
      .headPosts   {border-bottom: solid 2px #555;}
      
      div.post {margin: 0 5px; padding-top:5px; height:20px; font-size:9pt; }
      div.watched {font-size:9pt; font-weight:bold; color: rgba(150,0,0,1); }
      div.oldPost {margin: 0 5px; padding-top:5px; height:20px; font-size:8pt; font-family:굴림; /*font-style:italic; */}
      div.underlined {border-bottom:1px solid;}
      div.oddPost {background:#EEE;}
      .message {margin: 10px; text-align:center;}
      span {padding:0 5px;float:left; overflow:hidden; white-space: nowrap;}
      span.head_l {width:90px; color:gray; text-align:center;}
      span.head_s {width:60px; color:gray; text-align:center;}
      span.checked {font-family:arial;padding:0 0;position:relative;left:-8px;width:10px; color:red; text-align:center; cursor:pointer;}
      span.title {width:240px; cursor:hand; cursor:pointer; color:blue;}
      span.clear {clear:both;}
      #profile {float:left; width:190px; font-size:9pt; padding:5px; margin-bottom:10px; border:1px #E4DEF0 solid;}
      span.desc {padding:0 5px 0 0; font-size:8pt; color:grey;}
      #messages {float:left; width:405px; font-size:9pt; padding:5px; margin-bottom:10px; border-top:1px #E4DEF0 solid;}
      .show {display:inline;}
      .hide {display:none;}
    </style>
    <script type="text/javascript" src="background.js"></script>

  </head>                 
  <body>
  <div id="body">
	<div class="post underlined">
		<div id="homeButton" onclick="javascript: gotofpn()">종이천하 내맞춤쪽</div>
		<div style="float:left;width:70px;height:10px;"></div>
		<div id="mypageButton" class="tabButtonSelected" onclick="javascript: showMyPage()">내글에 새댓글 <span class="nbBadge" id="nbNewComments"></span>/새쪽지 <span class="nbBadge" id="nbMessages"></span></div>
		<div style="float:left;width:50px;height:10px"></div>
		<div id="postButton" class="tabButton" onclick="javascript: showNewPosts()">전체 새글/댓글 <span class="nbBadge" id="nbWatches"></span></div>
		<div id="refreshButton" onclick="javascript: refresh()">다시읽기</div>
	</div>
	<div id="container"></div>
	<div id="profile"></div>
	<div id="messages"></div>
  </div>
  <script>
  	function gotofpn()
  	{
  		chrome.tabs.create({url: "http://www.finalpaper.net/mypage.php"});
  	}
  	function refresh()
  	{
		document.getElementById("mypageButton").className = "tabButtonSelected";
		document.getElementById("postButton").className = "tabButton";
  		requestMyPage();
  		document.getElementById("container").innerHTML = '<div class="message">다시 불러오고 있습니다.</div>';
  		document.getElementById("messages").innerHTML = '<div class="message">다시 불러오고 있습니다.</div>';
  	}

	var mb_id  = localStorage["mb_id"];
	var apikey = localStorage["apikey"];

	if (!apikey || !mb_id || apikey == "" || mb_id == "") {
		chrome.tabs.create({url: "options.html"});
		window.close();
	}
	else{
		handleMyPage();				
	}

	function showMyPage()
	{
		if(document.getElementById("mypageButton").className != "tabButtonSelected")
		{
			document.getElementById("mypageButton").className = "tabButtonSelected";
			document.getElementById("postButton").className = "tabButton";
			handleMyPage();
			trackButton("MyPage");	// GA
		}
	}
	
	function showNewPosts()
	{
		if(document.getElementById("postButton").className != "tabButtonSelected")
		{
			document.getElementById("postButton").className = "tabButtonSelected";
			document.getElementById("mypageButton").className = "tabButton";
			handleNewPosts();
			trackButton("NewPosts");	// GA
		}
	}

	function handleMyPage()
	{
		viewNewComments();
		viewProfile();
		viewMessages();
		updateHeadNumbers();
	}
	
	function updateHeadNumbers()
	{
		// v0.38+ watched list
		var nbWatches = parseInt(localStorage["totalWatches"]);
		if(nbWatches) {
			document.getElementById("nbWatches").className = 'nbBadge show';
			document.getElementById("nbWatches").innerHTML = nbWatches;
		}

	}
	
	function viewNewComments()
	{
/*
	DOM structure:
		newComments
			total
			comment
				group
				board
				title
				URL
				name
				datetime
*/
		document.getElementById("container").innerHTML = '';

		var error=localStorage["errorMyPage"];
		if(error) {
			document.getElementById("container").innerHTML = '<div  class="message">에러가 발생했습니다. 코드: '+error+'</div>';
			return;
		}
			
		var parser=new DOMParser();
		
  		var xmlDoc=parser.parseFromString(localStorage["newComments"],"text/xml");
		var postviews = xmlDoc.getElementsByTagName("comment");
		
		var length = postviews.length;
		if(length==0)
		{
			document.getElementById("container").innerHTML = '<div  class="message">새 댓글이 없습니다. :)</div>';
			document.getElementById("nbNewComments").className = 'hide';
			return;
		}

		document.getElementById("nbNewComments").className = 'nbBadge show';
		document.getElementById("nbNewComments").innerHTML = length;

		var newdiv=document.createElement("div");
		newdiv.className = "header headComments";
		newdiv.innerHTML = "<span class='head_s'>그룹</span><span class='head_l'>게시판</span><span style='width:240px; color:gray; text-align:center;'>댓글 내용</span><span class='head_l'>작성자</span><span class='head_s'>시간</span>";
		document.getElementById("container").appendChild(newdiv)

		for (var i=0;i<length && i<20;i++)
		{
			var postView = postviews[i];
			var group, board, title, URL, table, wr_id, name, dtime;
			try {
				group = postView.getElementsByTagName("group")[0].childNodes[0].nodeValue;
				board = postView.getElementsByTagName("board")[0].childNodes[0].nodeValue;
				title = postView.getElementsByTagName("title")[0].childNodes[0].nodeValue;
				URL   = postView.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
//				table = postView.getElementsByTagName("bo_table")[0].childNodes[0].nodeValue;
//				wr_id = postView.getElementsByTagName("wr_id")[0].childNodes[0].nodeValue;
				name  = postView.getElementsByTagName("name")[0].childNodes[0].nodeValue;
				dtime = postView.getElementsByTagName("datetime")[0].childNodes[0].nodeValue;
			} catch(e) {
//				console.error(e);
			}

			var newdiv=document.createElement("div");
			newdiv.id = 'comment' + i;
			if(i%2==0) newdiv.className = "post";
			else newdiv.className = "post oddPost";

			var g_span = newdiv.appendChild(document.createElement('span'));
			g_span.className = "head_s";
			g_span.innerHTML = group;

			var b_span = newdiv.appendChild(document.createElement('span'));
			b_span.className = "head_l";
			b_span.innerHTML = board;

			var t_span = newdiv.appendChild(document.createElement('span'));
			t_span.className = "title";
//			t_span.innerHTML = decodeURIComponent(title);
			t_span.innerHTML = title;
//			t_span.setAttribute("table",table);
//			t_span.setAttribute("wr_id",wr_id);
//			t_span.onclick = function(){chrome.tabs.create({url: 'http://finalpaper.net/bbs/board.php?bo_table=' + this.getAttribute('table') + '&wr_id=' + this.getAttribute('wr_id')})};
			t_span.setAttribute("URL",decodeURIComponent(URL));
			t_span.onclick = function(){
				removeComment(this.getAttribute('URL'));
				if(localStorage["openedTabId"]) chrome.tabs.update(parseInt(localStorage["openedTabId"]),{url: this.getAttribute('URL')});
				else chrome.tabs.create({url: this.getAttribute('URL')},function(tab){localStorage["openedTabId"]=tab.id+''});
				window.close();
			};

			var n_span = newdiv.appendChild(document.createElement('span'));
			n_span.className = "head_l";
			n_span.innerHTML = name;

			var d_span = newdiv.appendChild(document.createElement('span'));
			d_span.className = "head_s";
			d_span.innerHTML = dtime;

			var clear = newdiv.appendChild(document.createElement('span'));
			clear.className = "clear";

			document.getElementById("container").appendChild(newdiv)
		}
	}

	function removeComment(url)
	{
		localStorage["totalComments"] = Math.max(0, parseInt(localStorage["totalComments"])-1);
		var parser=new DOMParser();
  		var xmlDoc=parser.parseFromString(localStorage["newComments"],"text/xml");
  		xmlDoc.getElementsByTagName("total")[0].childNodes[0].nodeValue = localStorage["totalComments"];
		var search = xmlDoc.getElementsByTagName("URL");
		for(var i=0; i<search.length; i++) {
			if(search[i].childNodes[0].nodeValue==encodeURIComponent(url)) {
				xmlDoc.documentElement.removeChild(search[i].parentNode);
				localStorage["newComments"] = (new XMLSerializer()).serializeToString(xmlDoc);
				return;
			}
		}
	}
	
	function viewProfile()
	{
/*
	DOM structure:
		profile
			nick
			picture
			position
			years
			badge
			mark
			exp
			rank
			signature
			point
			point_c
			point_m
			point_y
			point_p
			recomended
*/
//		return;		// disabled for now.. v0.33
		
		document.getElementById("profile").className = 'show';
		document.getElementById("profile").innerHTML = '';

		var parser=new DOMParser();
		
  		var xmlDoc=parser.parseFromString(localStorage["profile"],"text/xml");
		var nick	= xmlDoc.getElementsByTagName("nick")[0].childNodes[0].nodeValue;
		var picture	= decodeURIComponent(xmlDoc.getElementsByTagName("picture")[0].childNodes[0].nodeValue);
		var position	= xmlDoc.getElementsByTagName("position")[0].childNodes[0].nodeValue;
		var years	= xmlDoc.getElementsByTagName("years")[0].childNodes[0].nodeValue;
		//var badge	= decodeURIComponent(xmlDoc.getElementsByTagName("badge")[0].childNodes[0].nodeValue);
		var mark	= decodeURIComponent(xmlDoc.getElementsByTagName("mark")[0].childNodes[0].nodeValue);
		var exp		= parseInt(xmlDoc.getElementsByTagName("exp")[0].childNodes[0].nodeValue);
		var rank	= xmlDoc.getElementsByTagName("rank")[0].childNodes[0].nodeValue;
		var signature	= xmlDoc.getElementsByTagName("signature")[0].childNodes[0].nodeValue;
		var point	= xmlDoc.getElementsByTagName("point")[0].childNodes[0].nodeValue;
		var point_c	= xmlDoc.getElementsByTagName("point_c")[0].childNodes[0].nodeValue;
		var point_m	= xmlDoc.getElementsByTagName("point_m")[0].childNodes[0].nodeValue;
		var point_y	= xmlDoc.getElementsByTagName("point_y")[0].childNodes[0].nodeValue;
		var point_p	= xmlDoc.getElementsByTagName("point_p")[0].childNodes[0].nodeValue;
		var recomended	= xmlDoc.getElementsByTagName("recomended")[0].childNodes[0].nodeValue;
		
				
		var newdiv=document.createElement("div");
		var level = fpn_xp_up(exp,0);
		newdiv.innerHTML = "<img style='float:left; width:80px; height:80px;' src='"+picture+"'/>"
			+"<div style='float:left;padding:1px 5px;'><span class='desc'>별명:</span>"+nick+"<br/>"
			+"<span class='desc'>직급:</span>"+position+" "+years+" 호봉<br/>"
			+"<span class='desc'>레벨:</span>"+level+"<br/>"
			+"<span class='desc'>순위:</span>"+rank+"<br/>"
			+"<span class='desc'>포인트:</span>"+point+"</div>"; 
		document.getElementById("profile").appendChild(newdiv)
	}
	
	function fpn_xp_up(exp,level)
	{		
		level ++;
		var xp_up=level*100;
		for(var i=1;i<level;i++)
			xp_up += 10*i;
		if(exp<=xp_up) return level;
		else return fpn_xp_up(exp,level);
	}

	function viewMessages()
	{
/*
	DOM structure:
		newMessages
			total
			message
				name
				content
				URL
				datetime
*/
		document.getElementById("messages").className = 'show';
		document.getElementById("messages").innerHTML = '';

		var parser=new DOMParser();
		
  		var xmlDoc=parser.parseFromString(localStorage["newMessages"],"text/xml");
		var messages = xmlDoc.getElementsByTagName("message");
		
		var length = messages.length;
		if(length==0)
		{
			document.getElementById("messages").innerHTML = '<div class="message">새 쪽지가 없습니다. :)</div>';
			document.getElementById("nbMessages").className = 'hide';
			return;
		}

		document.getElementById("nbMessages").className = 'nbBadge show';
		document.getElementById("nbMessages").innerHTML = length;

		var newdiv=document.createElement("div");
		newdiv.className = "header headMessages";
		newdiv.innerHTML = "<span class='head_s'>보낸 사람</span><span style='width:240px; color:gray; text-align:center;'>쪽지 내용</span><span class='head_s'>시간</span>";
		document.getElementById("messages").appendChild(newdiv)

		for (var i=0;i<length;i++)
		{
			var message = messages[i];

			var name  = message.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			var title = message.getElementsByTagName("content")[0].childNodes[0].nodeValue;
			var URL   = message.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
			var dtime = message.getElementsByTagName("datetime")[0].childNodes[0].nodeValue;

			var newdiv=document.createElement("div");
			newdiv.id = 'message' + i;
			if(i%2==0) newdiv.className = "post";
			else newdiv.className = "post oddPost";

			var n_span = newdiv.appendChild(document.createElement('span'));
			n_span.className = "head_s";
			n_span.innerHTML = name;

			var t_span = newdiv.appendChild(document.createElement('span'));
			t_span.className = "title";
			t_span.innerHTML = title;
			t_span.setAttribute("URL",decodeURIComponent(URL));
			t_span.onclick = function(){
				removeMessage(this.getAttribute('URL'));
				window.open(this.getAttribute('URL'),'winMemo','left=50,top=50,width=620,height=460,scrollbars=1');
			};

			var d_span = newdiv.appendChild(document.createElement('span'));
			d_span.className = "head_s";
			d_span.innerHTML = dtime.substr(3,12);

			var clear = newdiv.appendChild(document.createElement('span'));
			clear.className = "clear";

			document.getElementById("messages").appendChild(newdiv)
		}
	}
	
	function removeMessage(url)
	{
		localStorage["totalMessages"] = Math.max(0, parseInt(localStorage["totalMessages"])-1);
		var parser=new DOMParser();
  		var xmlDoc=parser.parseFromString(localStorage["newMessages"],"text/xml");
  		xmlDoc.getElementsByTagName("total")[0].childNodes[0].nodeValue = localStorage["totalMessages"];
		var search = xmlDoc.getElementsByTagName("URL");
		for(var i=0; i<search.length; i++) {
			if(search[i].childNodes[0].nodeValue==encodeURIComponent(url)) {
				xmlDoc.documentElement.removeChild(search[i].parentNode);
				localStorage["newMessages"] = (new XMLSerializer()).serializeToString(xmlDoc);
				return;
			}
		}
	}
	
	function handleNewPosts()
	{
/*
	DOM structure:
		newPosts
			total
			post
				group
				board
				title
				bo_table
				wr_id
				name
				datetime
*/
		document.getElementById("container").innerHTML = '';
		document.getElementById("profile").className = 'hide';
		document.getElementById("messages").className = 'hide';
		
		var error=localStorage["errorPost"];
		if(error) {
			document.getElementById("container").innerHTML = '<div  class="message">에러가 발생했습니다. 코드: '+error+'</div>';
			return;
		}

		// v0.38+ watched list
		var nbWatches = parseInt(localStorage["totalWatches"]);
		var cntWatches = 0;
		if(nbWatches) {
			document.getElementById("nbWatches").className = 'nbBadge show';
			document.getElementById("nbWatches").innerHTML = nbWatches;
		}

		var parser=new DOMParser();
		
		// new posts
  		var xmlDoc=parser.parseFromString(localStorage["newPosts"],"text/xml");
		var postviews = xmlDoc.getElementsByTagName("post");
		
		var length = postviews.length;

		var newdiv=document.createElement("div");
		newdiv.className = "header headPosts";
		newdiv.innerHTML = "<span class='head_s'>그룹</span><span class='head_l'>게시판</span><span style='width:240px; color:gray; text-align:center;'>제목/내용</span><span class='head_l'>작성자</span><span class='head_s'>시간</span>";
		document.getElementById("container").appendChild(newdiv)

		var cnts=0;	// total (old+new) posts.. currently max 20 + watched ones
		for (var i=0;i<length && (i<20 || cntWatches<nbWatches) ;i++)
		{
			var postView = postviews[i];

			var group = postView.getElementsByTagName("group")[0].childNodes[0].nodeValue;
			var board = postView.getElementsByTagName("board")[0].childNodes[0].nodeValue;
			var title = postView.getElementsByTagName("title")[0].childNodes[0].nodeValue;
//			var URL   = postView.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
			var table = postView.getElementsByTagName("bo_table")[0].childNodes[0].nodeValue;
			var wr_id = postView.getElementsByTagName("wr_id")[0].childNodes[0].nodeValue;
			var name  = postView.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			var dtime = postView.getElementsByTagName("datetime")[0].childNodes[0].nodeValue;
			var watched = postView.getElementsByTagName("watched").length ? "*" : 0;

			if(!watched && i+(nbWatches-cntWatches)>=20)	// not watched one and not spot left for Watches
				continue;

			var newdiv=document.createElement("div");
			newdiv.id = 'post' + cnts;
			var postClass  ="post";
			if(watched=="*") {
				postClass = postClass + " watched";
				cntWatches ++;
			}
			if(cnts%2) postClass = postClass + " oddPost";
			newdiv.className = postClass;

			var g_span = newdiv.appendChild(document.createElement('span'));
			g_span.className = "head_s";
			g_span.innerHTML = group;

			var b_span = newdiv.appendChild(document.createElement('span'));
			b_span.className = "head_l";
			b_span.innerHTML = board;

			var t_span = newdiv.appendChild(document.createElement('span'));
			t_span.className = "title";
//			t_span.innerHTML = decodeURIComponent(title);
			t_span.innerHTML = title;
			t_span.setAttribute("table",table);
			t_span.setAttribute("wr_id",wr_id);
			t_span.setAttribute("pid",cnts);
			t_span.onclick = function(){
				readPost(this.getAttribute('table'),this.getAttribute('wr_id'),this.getAttribute('pid'));
				var url = 'http://finalpaper.net/bbs/board.php?bo_table=' + this.getAttribute('table') + '&wr_id=' + this.getAttribute('wr_id');
				if(localStorage["openedTabId"]) chrome.tabs.update(parseInt(localStorage["openedTabId"]),{url: url});
				else chrome.tabs.create({url: url},function(tab){localStorage["openedTabId"]=tab.id+''});
				window.close();
			};

			var n_span = newdiv.appendChild(document.createElement('span'));
			n_span.className = "head_l";
			n_span.innerHTML = name;

			var d_span = newdiv.appendChild(document.createElement('span'));
			d_span.className = "head_s";
			d_span.innerHTML = dtime
			
			if(watched) {
				var a_span = newdiv.appendChild(document.createElement('span'));
				a_span.className = "checked";
				a_span.innerHTML = "✓";
				a_span.setAttribute("table",table);
				a_span.setAttribute("wr_id",wr_id);
				a_span.setAttribute("pid",cnts);
				a_span.onclick = function(){
					this.className = "hide";
					readPost(this.getAttribute('table'),this.getAttribute('wr_id'),this.getAttribute('pid'));
				}
			}

			var clear = newdiv.appendChild(document.createElement('span'));
			clear.className = "clear";

			document.getElementById("container").appendChild(newdiv)
			cnts ++;
		}
		
		// old posts
  		var oldXmlDoc=parser.parseFromString(localStorage["oldPosts"],"text/xml");
		postviews = oldXmlDoc.getElementsByTagName("post");

		for (var i=0;i<postviews.length && (cnts<20 || cntWatches<nbWatches);i++)
		{
			var postView = postviews[i];

			var group = postView.getElementsByTagName("group")[0].childNodes[0].nodeValue;
			var board = postView.getElementsByTagName("board")[0].childNodes[0].nodeValue;
			var title = postView.getElementsByTagName("title")[0].childNodes[0].nodeValue;
//			var URL   = postView.getElementsByTagName("URL")[0].childNodes[0].nodeValue;
			var table = postView.getElementsByTagName("bo_table")[0].childNodes[0].nodeValue;
			var wr_id = postView.getElementsByTagName("wr_id")[0].childNodes[0].nodeValue;
			var name  = postView.getElementsByTagName("name")[0].childNodes[0].nodeValue;
			var dtime = postView.getElementsByTagName("datetime")[0].childNodes[0].nodeValue;
			var watched = postView.getElementsByTagName("watched").length ? "*" : 0;

			if(!watched && cnts+(nbWatches-cntWatches)>=20)	// not watched one and not spot left for Watches
				continue;

			var newdiv=document.createElement("div");
			newdiv.id = 'post' + cnts;
			var postClass  ="oldPost";
			if(watched=="*") {
				postClass = postClass + " watched";
				cntWatches ++;
			}
			if(cnts%2) postClass = postClass + " oddPost";
			newdiv.className = postClass;

			var g_span = newdiv.appendChild(document.createElement('span'));
			g_span.className = "head_s";
			g_span.innerHTML = group;

			var b_span = newdiv.appendChild(document.createElement('span'));
			b_span.className = "head_l";
			b_span.innerHTML = board;

			var t_span = newdiv.appendChild(document.createElement('span'));
			t_span.className = "title";
//			t_span.innerHTML = decodeURIComponent(title);
			t_span.innerHTML = title;
			t_span.setAttribute("table",table);
			t_span.setAttribute("wr_id",wr_id);
			t_span.setAttribute("pid",cnts);
			t_span.onclick = function(){
				readPost(this.getAttribute('table'),this.getAttribute('wr_id'),this.getAttribute('pid'));
				var url = 'http://finalpaper.net/bbs/board.php?bo_table=' + this.getAttribute('table') + '&wr_id=' + this.getAttribute('wr_id');
				if(localStorage["openedTabId"]) chrome.tabs.update(parseInt(localStorage["openedTabId"]),{url: url});
				else chrome.tabs.create({url: url},function(tab){localStorage["openedTabId"]=tab.id+''});
				window.close();
			};

			var n_span = newdiv.appendChild(document.createElement('span'));
			n_span.className = "head_l";
			n_span.innerHTML = name;

			var d_span = newdiv.appendChild(document.createElement('span'));
			d_span.className = "head_s";
			d_span.innerHTML = dtime;

			if(watched) {
				var a_span = newdiv.appendChild(document.createElement('span'));
				a_span.className = "checked";
				a_span.innerHTML = "✓";
				a_span.setAttribute("table",table);
				a_span.setAttribute("wr_id",wr_id);
				a_span.setAttribute("pid",cnts);
				a_span.onclick = function(){
					this.className = "hide";
					readPost(this.getAttribute('table'),this.getAttribute('wr_id'),this.getAttribute('pid'));
				}
			}

			var clear = newdiv.appendChild(document.createElement('span'));
			clear.className = "clear";

			document.getElementById("container").appendChild(newdiv);
			cnts ++;
		}
		if(cnts==0) {
			if(!localStorage["lastChecked"])
				document.getElementById("container").innerHTML = '<div style="text-align:center">아직 읽어오는 중입니다. :(</div>';
			else 
				document.getElementById("container").innerHTML = '<div style="text-align:center">새 글/댓글이 없습니다. :)</div>';
		}
	}
	
	function readPost(table, wr_id, pid)
	{
		var nbWatches = Math.max(0, parseInt(localStorage["totalWatches"])-1);
		localStorage["totalWatches"] = nbWatches;
		if(nbWatches) {
			document.getElementById("nbWatches").className = 'nbBadge show';
			document.getElementById("nbWatches").innerHTML = nbWatches;
		}else {
			document.getElementById("nbWatches").className = 'nbBadge hide';
		}

		var parser=new DOMParser();
  		var xmlDoc=parser.parseFromString(localStorage["newPosts"],"text/xml");
		var search = xmlDoc.getElementsByTagName("post");
		for(var i=0; i<search.length; i++) {
			if(search[i].getElementsByTagName("bo_table")[0].childNodes[0].nodeValue==table
				&& search[i].getElementsByTagName("wr_id")[0].childNodes[0].nodeValue==wr_id
				&& search[i].getElementsByTagName("watched").length
			) {
				search[i].removeChild(search[i].getElementsByTagName("watched")[0]);
				localStorage["newPosts"] = (new XMLSerializer()).serializeToString(xmlDoc);
				if(pid%2) document.getElementById("post"+pid).className = 'post oddPost';
				else document.getElementById("post"+pid).className = 'post';
				return;
			}
		}
		// check oldPosts
  		xmlDoc=parser.parseFromString(localStorage["oldPosts"],"text/xml");
  		search = xmlDoc.getElementsByTagName("post");
		for(var i=0; i<search.length; i++) {
			if(search[i].getElementsByTagName("bo_table")[0].childNodes[0].nodeValue==table
				&& search[i].getElementsByTagName("wr_id")[0].childNodes[0].nodeValue==wr_id
				&& search[i].getElementsByTagName("watched").length
			) {
				search[i].removeChild(search[i].getElementsByTagName("watched")[0]);
				localStorage["oldPosts"] = (new XMLSerializer()).serializeToString(xmlDoc);
				if(pid%2) document.getElementById("post"+pid).className = 'oldPost oddPost';
				else document.getElementById("post"+pid).className = 'oldPost';
				return;
			}
		}
	}
	
	
  </script>

    <script src="analytics.js"></script>
    <script>
      /**
       *  Tracks a single button click.  You can use the _trackEvent command
       *  to track user interactions with different parts of your extension.
       */
      function trackButton(button_id) {
        _gaq.push(['_trackEvent', 'button' + button_id, 'clicked']);
      }
    </script>
	

  </body>
</html>
